import React, { useState } from 'react'
import { Button, Upload, Steps, Image } from 'antd';
import uplodImg from "../../../icon/上传.png"
import process from "../../../icon/过程1-1.png"
import process2 from "../../../icon/过程1-2.png"

export default function BatchManage() {
  const [fileList, setFileList] = useState([]);
  const [current, setCurrent] = useState(0);
  const { Dragger } = Upload;

  const mprops = {
    onRemove: (file) => {
      setFileList([]);
    },
    beforeUpload: (file) => {
      setFileList([file]);
      return false;
    },
    fileList,
    accept: ".xlsx"
  };
  const changeStep = (cur) => {
    if (current + 1 === cur || current - 1 === cur) {
      setCurrent(cur)
    }

  }
  const steps = [
    {
      title: <b>导入设备</b>,
      icon: <Image src={current >= 0 ? process : process2}></Image>,
      content:
        <div style={{ padding: "15px 15px", width: "60%", position: "absolute", left: "20%", margin: "30px 0 0 0" }}>
          <div style={{ backgroundColor: " #e5e6e6c7", height: "50px", lineHeight: "50px", padding: "0 15px", fontSize: "12px" }}>
            <span>1、下载导入模板，根据模板提示信息完善内容</span>
            <Button style={{ float: "right", top: "9px", fontSize: "12px", backgroundColor: "#1FBBA9", color: "white" }}>下载模板</Button>
          </div>
          <div style={{ backgroundColor: " #e5e6e6c7", height: "370px", lineHeight: "50px", padding: "0 15px", fontSize: "12px", margin: "15px 0 0 0" }}>
            <span>2、上传完善好的内容，只能上传xls、xlsx格式文件</span>
            <Button style={{ float: "right", top: "9px", fontSize: "12px", backgroundColor: "#1FBBA9", color: "white" }}>导入日志</Button>
            <div style={{ height: "300px" }}>
              <Dragger {...mprops} style={{ background: "white", borderRadius: "1px" }}>
                <img src={uplodImg} alt="earth" className="sideLogo" style={{ height: "60px", width: "60px", margin: "0 0 0 3px" }} />
                <p style={{ fontSize: "12px" }}>导入设备</p>
              </Dragger>
            </div>
          </div>
        </div>
    },
    {
      title: <b>检查导入设备</b>,
      icon: <Image src={current >= 1 ? process : process2}></Image>,
      content: <div style={{ padding: "15px 15px", width: "60%", position: "absolute", left: "20%", margin: "30px 0 0 0" }}>2</div>
    },
    {
      title: <b>设备处理类型</b>,
      icon: <Image src={current >= 2 ? process : process2}></Image>,
      content: <div style={{ padding: "15px 15px", width: "60%", position: "absolute", left: "20%", margin: "30px 0 0 0" }}>3</div>
    },
    {
      title: <b>一键处理</b>,
      icon: <Image src={current >= 3 ? process : process2}></Image>,
      content: <div style={{ padding: "15px 15px", width: "60%", position: "absolute", left: "20%", margin: "30px 0 0 0" }}>4</div>
    }
  ]

  return (
    <div style={{ background: "white", minHeight: "545px", margin: "15px 0 0 0" }}>
      <div style={{ width: "60%", position: "absolute", left: "20%" }}>
        <Steps current={current} items={steps} onChange={(cur) => changeStep(cur)} />

      </div>
      {steps[current].content}
    </div>
  )
}
